<template>
  <div>
    <!-- 资质盖章审批 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      size="mini"
      label-position="right"
      label-width="100px"
      :disabled="readonly"
    >
      <el-col :span="24">
        <el-form-item label="用印部门" prop="printingDepartment">
          <el-select v-model="ruleForm.printingDepartment" placeholder="请选择用印部门" style="width: 100%">
            <el-option
              v-for="item in printingDepartmentData"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="用印日期" prop="timeSeal">
          <el-date-picker
            v-model="ruleForm.timeSeal"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择用印日期"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="盖章份数" prop="sealNumber">
          <el-input type="number" v-model="ruleForm.sealNumber"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="资质类型" prop="qualificationType">
          <el-select v-model="ruleForm.qualificationType" placeholder="请选择资质类型" style="width: 100%">
            <el-option
              v-for="item in qualificationTypeArr"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="印章名称" prop="sealName">
          <el-select v-model="ruleForm.sealName" placeholder="请选择印章名称" style="width: 100%">
            <el-option
              v-for="item in sealNameArr"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="所属地区" prop="area">
          <el-input v-model="ruleForm.area"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="盖章事由" prop="sealReasons">
          <el-input type="textarea" v-model="ruleForm.sealReasons"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="附件" prop="accessoryList">
          <!-- <Upload v-model="ruleForm.accessoryList"></Upload> -->
          <Upload v-model="ruleForm.accessoryList" :limit="10" fielState="4" :id="details.id"></Upload>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { OnlineFormController, OnlineOperation } from '@/api/onlineController.js';
import { getType } from '@/utils/index.js';
import Upload from '@/views/Projects/components/Upload.vue';
export default {
  props: {
    details: {
      type: Object,
      default: () => { }
    },
    // 查看详情为只读
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // 用印部门数据
      printingDepartmentData: [],
      // 资质类型数据
      qualificationTypeArr: [],
      // 资质类型数据
      sealNameArr: [],
      ruleForm: {},
      rules: {
        printingDepartment: [
          { required: true, message: '请选择用印部门', trigger: 'change' }
        ],
        timeSeal: [
          { required: true, message: '请选择用印日期', trigger: 'change' }
        ],
        sealNumber: [
          { required: true, message: '请填写盖章份数', trigger: 'blur' }
        ],
        qualificationType: [
          { required: true, message: '请选择资质类型', trigger: 'change' }
        ],
        sealName: [
          { required: true, message: '请选择印章名称', trigger: 'change' }
        ],
        area: [
          { required: true, message: '请填写所属地区', trigger: 'blur' }
        ],
        sealReasons: [
          { required: true, message: '请填写盖章事由', trigger: 'blur' }
        ],
        accessoryList: [
          { required: false, message: '请上传附件', trigger: 'change' }
        ]
      }
    };
  },
  created () {
    this.init();
    console.log(this.details, 100)
  },
  components: {
    Upload
  },
  methods: {
    init () {
      if (this.details) {
        console.log('子表单数据', this.details);
        this.$set(this, 'ruleForm', this.details);
        // this.$set(this.ruleForm, 'accessoryList', this.details?.accessoryList);
        // console.log('上传回显', this.details?.accessoryList);
      }
      // render表单数据
      this.getRenderData();
      // 获取用印部门数据
      this.getPrintingDepartmentData();
    },
    // 获取用印部门数据
    async getPrintingDepartmentData () {
      let params = {
        dictId: '1529301248694554624'
      };
      let res = await OnlineOperation.listDict(this, params);
      this.printingDepartmentData = res.data;
    },
    // render表单数据
    async getRenderData () {
      let params = {
        formId: '1529304459530735616'
      };
      let res = await OnlineFormController.render(this, params);
      let onlineDictList = res.data.onlineDictList;
      // 资质类型
      let qualificationTypeDictDataJson = (onlineDictList || [])[1]?.dictDataJson;
      qualificationTypeDictDataJson = getType(qualificationTypeDictDataJson).isString && JSON.parse(qualificationTypeDictDataJson);
      this.qualificationTypeArr = qualificationTypeDictDataJson.dictData;
      // 印章名称
      let sealNameDictDataJson = (onlineDictList || [])[2]?.dictDataJson;
      sealNameDictDataJson = getType(sealNameDictDataJson).isString && JSON.parse(sealNameDictDataJson);
      this.sealNameArr = sealNameDictDataJson.dictData;
    },
    getFormData () {
      return new Promise((resolve, reject) => {
        this.$refs['ruleForm'].validate((valid) => {
          if (!valid) {
            return false;
          };
          resolve(this.ruleForm);
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
